<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width:100%;
				height:200px ;
				/* 边框和背景颜色：检测页面元素是否选中 */
				background-color: #ff00ff;
				bord er : 1px solid red;
				/* id选择器和class选择器区别？
				 id用于页面结构搭建， class位于id中结构中进行微调部分
				 */
			}
			#body{
				width:100% ;
				height:500px ;
				background-color: #ff5500;
			}
			#footer{
				width: 100%;
				height: 200px;
				background-color: #ff00ff;
			}
		</style>
	</head>
	<body>
		<!-- 选择器：抓取页面元素
		 ①元素选择器：以元素名称作为选择器，抓取页面元素
		 ②伪类选择器：在其他选择器上附加效果   ：hover   鼠标悬停时
		                                    ：before  在元素前面生成文本，结合content属性
											：after  在元素后面生成文本，结合content属性
		 ③类选择器 ：以一个别名或多个别名进行抓取页面元素
		 ④通用选择器：抓取页面上所有的元素，规范页面效果【盒模型：内外边距、字体】
		 ⑤id选择器：以别名形式抓取页面元素【唯一性：用于页面结构搭建，切片】
		 语法：  html  前标记 id="别名"
		         css    #别名
		 -->    
		<div id="header">页头</div>
		<div id="body">主体</div>
		<div id="footer">页尾</div>
		<!-- 设置页主体body，页尾footer，宽度100%，高度颜色自定 -->
	</body>
</html>